<template>
  <view class="phone">
    <view class="phone-box" style="z-index: 20">
      <view class="navOneView">
        <i class="iconfont icon-zuojiantou" @tap="navOneViewFn"></i>
      </view>
      <h3>请输入手机号验证码</h3>
      <view class="tips">
        <text>手机号码:</text>
        <text class="tips-phone">+86 {{ phoneNumber }}</text>
        <text>, 有效期 10 分钟</text>
      </view>
      <view class="code-input-wrap">
        <input
          class="code-input"
          v-model="codeNumber"
          type="number"
          :adjust-position="false"
          :auto-blur="true"
          maxlength="6"
          @input="handleInputClick"
        />
        <view class="code-list">
          <block v-for="(item, index) in 6" :key="index">
            <view
              :class="[
                'code-list-item',
                codeNumber.length == index ? 'active-item' : '',
              ]"
            >
              {{ codeNumber[index] }}
            </view>
          </block>
        </view>
      </view>
      <view class="resending" v-if="isSending"
        >{{ counter }}后可以重新获取验证码</view
      >
      <view class="normal" v-else @tap="handleResend">重新获取验证码</view>
      <view class="verifyType">
        使用<text @tap="oneClickLogin">其他验证方式</text>
      </view>
    </view>

    <uni-popup
      ref="popupLoginType"
      background-color="#fff"
      class="popup-login-type-box"
      :mask-click="false"
      borderRadius="48rpx 48rpx 0 0"
    >
      <loginTypePopupVue
        :phone="phoneNumber"
        :loginType="loginType"
        @passLoginHandler="passLoginHandler"
        @closeTypeLogin="closeTypeLogin"
      />
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import loginTypePopupVue from '../../../components/loginTypePopup/loginTypePopup.vue'
let phoneNumber = ref('')
let codeNumber = ref('')
let isPhoneValid = ref(false)
let isCodeValid = ref(false)
let isSending = ref(false)
let timer = ref(null)
let counter = ref(60)
let popupLoginType = ref('')
const loginType = reactive({
  passLogin: true,
  codeLogin: false,
})
const oneClickLogin = () => {
  popupLoginType.value.open('bottom')
}
const passLoginHandler = (fn) => {
  fn()
}
const closeTypeLogin = () => {
  popupLoginType.value.close()
}
// 输入验证码
const handleInputClick = (e) => {
  let val = e.detail.value
  codeNumber.value = val
  if (val && val.length == 6) {
    isCodeValid.value = true
  } else {
    isCodeValid.value = false
  }
}
// 返回上一级
const navOneViewFn = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
// 获取验证码
const sendSmsCode = () => {
  if (isPhoneValid.value) {
    // 判断手机号格式是否符合要求
    if (!/^1[3456789]\d{9}$/.test(phoneNumber.value)) {
      uni.showToast({
        title: '手机号格式不正确',
        icon: 'none',
      })
      return false
    }
    // 判断复选框
    // if (!this.isChecked) {
    // this.showTips = true
    // return false
    // }
    // 调用接口，此处代码省略······
  }
}
// 倒计时
const countDown = () => {
  counter.value = 60
  isSending.value = true
  timer.value = setInterval(() => {
    counter.value--
    if (counter.value < 0) {
      reset()
    }
  }, 1000)
}
// 重置倒计时
const reset = () => {
  isSending.value = false
  if (timer.value) {
    clearInterval(timer.value)
    counter.value = 60
    timer.value = null
  }
}
// 重新发送
const handleResend = () => {
  console.log(44444)
  codeNumber.value = ''
  sendSmsCode()
}

onLoad((option) => {
  let staging = JSON.parse(decodeURIComponent(option.BLi))

  phoneNumber.value =
    staging.substring(0, 3) + ' **** ' + staging.substring(staging.length - 4)
  countDown()
})
</script>

<style lang="scss" scoped>
.phone {
  padding: 0 32rpx;
  box-sizing: border-box;
  background-image: url('../../../static/images/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100vh;

  .navOneView {
    height: 88rpx;
    line-height: 88rpx;
  }

  h3 {
    color: #1d2129;
    font-family: 'PingFang SC';
    font-size: 48rpx;
    font-weight: 500;
    line-height: 67.2rpx;
  }

  .tips {
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    margin-top: 16rpx;
    margin-bottom: 98rpx;

    .tips-phone {
      font-weight: bold;
      margin-left: 20rpx;
      color: #333;
    }

    text {
      color: #86909c;
    }
  }

  // 验证码输入
  .code-input-wrap {
    margin: 40rpx 0;
    position: relative;
    height: 100rpx;

    .code-input {
      position: absolute;
      left: 0;
      top: 0;
      height: 100rpx;
      width: 100%;
      opacity: 0;
      z-index: 99;
      outline: none;
    }

    .code-list {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100rpx;
      display: flex;
      justify-content: space-between;

      .code-list-item {
        // flex: 1;
        width: 90rpx;
        height: 100rpx;
        background: #ffffff;
        border-radius: 16rpx;
        font-size: 36rpx;
        font-weight: 700;
        color: #adb3ba;
        line-height: 100rpx;
        text-align: center;
        margin-right: 10rpx;
        z-index: 5;
        box-sizing: border-box;
        border: 1px solid #e5e6eb;
      }

      .code-list-item:last-child {
        margin-right: 0;
      }

      .active-item {
        border: 2rpx solid #165dff;
      }
    }
  }

  .resending,
  .normal {
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    margin-bottom: 32rpx;
    color: #a6acb2;
  }

  .normal {
    color: #165dff;
  }

  .verifyType {
    font-size: 28rpx;
    font-weight: 500;
    color: #a6acb2;

    text {
      color: #165dff;
    }
  }
}
</style>
